<template>
    <scFormTable v-model="fieldModel" :addTemplate = "fieldItem.options.addTemplate" :dragSort = "fieldItem.options.dragSort"
    :disabled = "fieldItem.options.disabled" :onlyDelete = "fieldItem.options.onlyDelete" :edit = "fieldItem.options.edit"
    :copyExcel = "fieldItem.options.copyExcel" :excelMap = "fieldItem.options.excelMap" :rowKey = "fieldItem.options.rowKey"
    >
    <template v-for="(item,index) in fieldItem.options.items" :key="index">
        <el-table-column :prop = "item.prop" :lanel ="item.label">
            <template #default="scope">
                <component v-if="item.componetName" v-model="scope.row[item.prop]" :is="getWidgetName(item.componetName)" :fieldItem ="item.options"></component>
                <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
        </el-table-column>
    </template>
    </scFormTable>
</template>
<script>
//局部批量注册组件
const requireAll = require.context("./field-widget/", true, /\.vue$/);
const componentsObj = {};
let arr = [];
const modulList = requireAll.keys().map((item) => requireAll(item));
modulList.forEach(({ default: modulObj }) => {
  componentsObj[modulObj.__name] = modulObj;
  arr.push(modulObj.__name);
});
export default {
  components: componentsObj, //注册所有相关组件
  data() {
    return {
      comList: arr,
    };
  },
};
</script>
<script setup>
import scFormTable from '@/components/scFormTable/index'
import { ref, onMounted, defineModel } from 'vue'
const fieldModel = defineModel()
const props = defineProps({
    fieldItem:{type:Object,default:()=>{}}
})
const getWidgetName = (widget) => {
  return widget + "-widget";
};
</script>